<div class="ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group">
  <div class="w-full flex justify-start items-center my-2" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'Story.Common.Calculations' | translate: { Default: 'Calculations' } }} & {{ 'Story.Common.Parameters' | translate: { Default: 'Parameters' } }}
    </span>
  </div>
    
  <mat-nav-list class="ngm-nav-list flex-1 overflow-auto">
    <mat-list-item *ngFor="let entity of entities$()" class="flex rounded-l-xl overflow-hidden mt-2"
      [class.active]="activeLink.entity === entity.value"
      (click)="activeEntity(entity.dataSource, entity.value)"
    >
      <ngm-display-behaviour class="flex-1" [option]="entity"></ngm-display-behaviour>
    </mat-list-item>
  </mat-nav-list>

  <div class="flex justify-between">
    <div ngmButtonGroup>
      <button mat-raised-button color="accent" cdkFocusInitial [mat-dialog-close]="true">
        {{ 'Story.Common.Close' | translate: { Default: 'Close' } }}
      </button>
    </div>

    <div>
      <!-- <button mat-icon-button></button> -->
    </div>
  </div>
</div>

<div class="flex-1 flex flex-col justify-start items-stretch overflow-hidden">
  <div *ngIf="activeLink" class="flex-1 flex flex-col justify-start items-stretch overflow-auto">
    <div class="flex justify-between items-center">
      <label class="text-lg p-2"> {{ 'Story.Common.Parameters' | translate: { Default: 'Parameters' } }} </label>
      <button mat-icon-button class="opacity-60" (click)="openCreateParameter()">
        <mat-icon fontSet="material-icons-outlined">add_circle_outline</mat-icon>
      </button>
    </div>
    
    <mat-list *ngIf="parameters?.length" class="flex-1 divide-y ml-4 dark:divide-neutral-800" displayDensity="cosy">
      <mat-list-item *ngFor="let parameter of parameters">
        <div class="flex item-center group">
          <ngm-display-behaviour class="flex-1" [option]="{value: parameter.name, label: parameter.caption}"></ngm-display-behaviour>

          <button mat-icon-button displayDensity="cosy" class="opacity-0 group-hover:opacity-90"
            (click)="openCreateParameter(parameter.name)">
              <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
          </button>
          <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="opacity-0 group-hover:opacity-90"
            (click)="removeParameter(parameter.name)">
              <mat-icon>close</mat-icon>
          </button>
        </div>
      </mat-list-item>
    </mat-list>

    <div class="flex justify-between items-center">
      <label class="text-lg p-2"> {{ 'Story.Common.Calculations' | translate: { Default: 'Calculations' } }} </label>
      <button mat-icon-button class="opacity-60" (click)="openCreateCalculation()">
        <mat-icon fontSet="material-icons-outlined">add_circle_outline</mat-icon>
      </button>
    </div>
    
    <mat-list *ngIf="calculations?.length" class="divide-y ml-4 dark:divide-neutral-800" displayDensity="cosy">
      <mat-list-item *ngFor="let calculation of calculations">
        <div class="flex items-center group">
          <ngm-display-behaviour class="flex-1" [option]="{value: calculation.name, label: calculation.caption}"></ngm-display-behaviour>
          <button mat-icon-button displayDensity="cosy" class="opacity-0 group-hover:opacity-90"
            (click)="openEditCalculation(calculation)">
              <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
          </button>
          <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="opacity-0 group-hover:opacity-90"
            (click)="removeCalculation(calculation)">
              <mat-icon>close</mat-icon>
          </button>
        </div>
      </mat-list-item>
    </mat-list>
  </div>
</div>
